<template>
  <div>
    <el-card shadow="never" class="margin-30">
      <div slot="header">
        <el-button type="primary" size="mini" @click="openModal">新增菜单</el-button>
      </div>
      <el-table
        :data="menuList"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column
          label="菜单名称"
        >
          <template slot-scope="scope">
            {{ scope.row.title }}<span :class="scope.row.hidden?'iconfont icon-bukejian':''" />
          </template>
        </el-table-column>
        <el-table-column
          label="图标"
          sortable
        >
          <template slot-scope="scope">
            <i :class="scope.row.icon" />
          </template>
        </el-table-column>
        <el-table-column
          prop="level"
          label="等级"
        />
        <el-table-column
          prop="sort"
          label="排序"
        />
        <el-table-column
          prop="permissionValue"
          label="权限标识"
        />
        <el-table-column
          prop="path"
          label="路由"
        />
        <el-table-column
          prop="component"
          label="组件路径"
        />
        <el-table-column
          prop="status"
          label="是否可用"
        />
        <el-table-column
          prop="createTime"
          label="创建时间"
        />
      </el-table>
    </el-card>
    <!-- <MenuDialog ref="menuDialog" :menu-list="menuList" /> -->
    <MenuDialog v-if="menuList.length" ref="menuDialog" :menu-list="menuList" @regetMenuList="getMenu" />
  </div>
</template>

<script>
import {
  findAllPermissions as findAllPermissionsApi
} from '@/api/auth/role'
import MenuDialog from './dialog'
export default {
  name: 'Resource',
  components: {
    MenuDialog
  },
  data() {
    return {
      menuList: [],
      modalVisible: false
    }
  },
  created() {
    this.getMenu()
  },
  methods: {
    // 打开弹框
    openModal() {
      this.$refs.menuDialog.openModal()
    },
    // 获取menu菜单
    getMenu() {
      findAllPermissionsApi()
        .then(res => {
          const { messsage, data, success } = res
          if (success) {
            this.menuList = data.menus
          } else {
            this.$message.error(messsage)
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
